<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<body>
    <div id="app">
        <p>原始字符串: {{ message }}</p>
        <p>计算后反转字符串: {{ reversedMessage }}</p>
        <p @click="add">{{a}} </p>
        <p @click='mix'>{{b}} </p>
        <p @click='full'>{{fullName}} </p>
        <p>计算: {{ count }} </p>
    </div>
</body>
<script>
    // 计算属性 vs 侦听属性
    //为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时
    // watch属性变化则执行



    /**
     *  计算属性 是依赖变化 注重依赖data跟随变化重新计算  如时钟计算属性不合适
     * 
     *  //拓展 debounce 延迟 异步 去抖
     * */
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'Runoob!',
            a: 1,
            b: 2
        },
        computed: {
            reversedMessage() {
                return this.message.split('').reverse().join('')
            },
            count() {
                return this.a + this.b;
            },
            fullName: {
                // getter
                get: function () {
                    return this.a + ' ' + this.b;
                },
                // setter vm.fullName = 'John Doe'
                set: function (newValue) {
                    this.a = '1';
                    this.b = '1';
                }
            }
        },
        methods: {
            add: function () {
                this.a = this.a + 3;
            },
            mix: function () {
                this.b = this.a + this.b;
            },
            full: function () {
                this.fullName = 'c';
            }
        }
    })
</script>